<template>
  <div>
    <el-row>
      <el-card>
        <el-form>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="线路编号">
                  <el-input
                    style="width: 70%"
                    v-model="formData.id"
                    placeholder="请输入线路编号"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="线路名称">
                  <el-input
                    style="width: 70%"
                    placeholder="请输入线路名称"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="起始机构">
                  <el-input
                    placeholder="请选择起始机构"
                    style="width: 70%"
                  ></el-input>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="目的地机构">
                  <el-input
                    style="width: 70%"
                    placeholder="请选择目的地机构"
                    v-model="formData.name"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="16">
              <el-button type="primary" @click="submit">搜索</el-button>
              <el-button @click="chongzhi">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-card>
        <el-col>
          <el-table
            border
            stripe
            style="text-align: center; margin-top: 15px; margin-bottom: 20px"
            :data="tableDate"
            @expand-change="openFn"
          >
            <el-table-column width="50" type="expand">
              <template>
                <el-table :data="tableDate1" border style="margin: 0 20px">
                  <template #empty>
                    <el-empty
                      :image-size="100"
                      description="这里空空如也"
                      image="https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png"
                    >
                    </el-empty>
                  </template>
                  <el-table-column
                    prop="estimatedTime"
                    width="230"
                    label="车次名称"
                  ></el-table-column>
                  <el-table-column width="230" label="发车频次">
                    <template #default="{ row }">
                      {{ row.periodName }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="230"
                    label="到达时间"
                  ></el-table-column>
                  <el-table-column
                    width="230"
                    label="车辆安排"
                  ></el-table-column>
                  <el-table-column
                    width="230"
                    label="司机安排"
                  ></el-table-column>
                  <el-table-column width="250" label="操作"></el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              width="160"
              prop="number"
              label="线路编号"
            ></el-table-column>
            <el-table-column
              width="160"
              prop="name"
              label="线路名称"
            ></el-table-column>
            <el-table-column prop="type" width="160" label="线路类型">
              <template #default="{ row }">
                {{ row.type === 2 ? "支线" : "干线" }}
              </template>
            </el-table-column>
            <el-table-column
              width="160"
              prop="startOrganName"
              label="起始地机构"
            ></el-table-column>
            <el-table-column
              prop="endOrganName"
              width="160"
              label="目的地机构"
            ></el-table-column>
            <el-table-column
              prop="distance"
              width="160"
              label="距离（千米）"
            ></el-table-column>
            <el-table-column
              prop="cost"
              width="160"
              label="成本（元）"
            ></el-table-column>
            <el-table-column
              prop="time"
              width="160"
              label="预计时间（分钟）"
            ></el-table-column>
            <el-table-column label="操作" width="160"> </el-table-column>
          </el-table>
          <yema
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            :page="page"
            :total="total"
          ></yema>
        </el-col>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getCarDate, getDateListApi } from "@/api/dispatch";

export default {
  data() {
    return {
      formData: [],
      tableDate: [],
      tableDate1: [],
      total: 100,
      page: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getDate();
  },
  methods: {
    submit() {},
    async openFn(row) {
      console.log(row.id);
      const res = await getCarDate(row.id);
      console.log(res.data.data);
      this.tableDate1 = res.data.data;
    },
    chongzhi() {},
    handleSizeChange(val) {
      console.log(val);
      this.page.pageSize = val;
      this.getDate();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.page.page = val;
      this.getDate();
    },
    async getDate() {
      const res = await getDateListApi(this.page);
      console.log(res.data.data);
      this.tableDate = res.data.data.items;
      this.total = +res.data.data.counts;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  ::v-deep .el-form-item__label {
    width: 96px;
  }
}
</style>
